<template>
  <div class="body">
    <el-card>
      <div class="title">商品管理</div>
      <el-form :inline="true" :model="formData">
        <el-form-item label="商品名称:">
          <el-input
            size="mini"
            v-model="formData.name"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品类型:">
          <!-- <el-input size="mini" v-model="formData.technologyName" placeholder="请选择商品类型"></el-input> -->
          <el-cascader
            size="mini"
            v-model="formData.productType"
            :options="options1"
            placeholder="请选择商品类型"
            @change="handleChange"
            clearable
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="生产商家:">
          <el-input
            size="mini"
            v-model="formData.companyName"
            placeholder="请输入生产商家"
          ></el-input>
        </el-form-item>
        <el-form-item label="审批状态:">
          <el-select
            size="mini"
            v-model="formData.status"
            placeholder="请选择审批状态"
            clearable
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button size="mini" type="primary" @click="getCompanyTechnology"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" align="center" label="序号" width="100">
        </el-table-column>
        <el-table-column
          prop="picture"
          align="center"
          label="商品图片"
          width="150"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px; border-radius: 50%"
              :src="scope.row.picture"
              :preview-src-list="[`${scope.row.picture}`]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          show-overflow-tooltip
          align="center"
          label="商品名称"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="price"
          show-overflow-tooltip
          align="center"
          label="商品价格"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="introduce"
          show-overflow-tooltip
          align="center"
          label="商品简介"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="details"
          show-overflow-tooltip
          align="center"
          label="商品详情"
          width="300"
        >
        </el-table-column>
        <el-table-column
          prop="broad"
          show-overflow-tooltip
          align="center"
          label="商品大类"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="type"
          show-overflow-tooltip
          align="center"
          label="商品小类"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="companyName"
          show-overflow-tooltip
          align="center"
          label="生产厂家"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="审批状态"
          width="150"
        >
          <template slot-scope="scope">
            <span
              :style="{
                color:
                  scope.row.status == 2
                    ? '#26db6f'
                    : scope.row.status == 3
                    ? '#ff0000'
                    : '#333',
              }"
              >{{
                scope.row.status == 1
                  ? "待审批"
                  : scope.row.status == 2
                  ? "审批通过"
                  : "审批未通过"
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button type="text" size="small">编辑</el-button>
            <el-button
              :disabled="scope.row.status != 1"
              @click="approve(scope.row)"
              type="text"
              size="small"
              >审批通过</el-button
            >
            <el-button
              :disabled="scope.row.status != 1"
              @click="reApprove(scope.row)"
              type="text"
              size="small"
              >审批拒绝</el-button
            >
            <!-- <el-button type="text" size="small">编辑</el-button> -->
            <el-button @click="deleteApp(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="currentPage.pageSize"
        layout="total,->, sizes, prev, pager, next, jumper"
        :total="currentPage.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {
  getCompanyTechnology,
  approveCompanyTechnology,
  delCompanyTechnology,
} from "../../api/table";
import { getProductList, approveProduct } from "@/api/goods";
export default {
  data() {
    return {
      formData: {
        status: "",
        name: "",
        productType: "",
        broad: "",
        type: "",
        companyName: "",
      },
      options: [
        {
          label: "待审批",
          value: 1,
        },
        {
          label: "审批通过",
          value: 2,
        },
        {
          label: "审批不通过",
          value: 3,
        },
      ],
      options1: [],
      values: [
        "食品",
        "百货",
        "水果",
        "美妆",
        "鞋包",
        "内衣",
        "医药",
        "运动",
        "男装",
        "女装",
        "电器",
        "饰品",
        "家纺",
        "家具",
        "母婴",
      ],
      values2: [
        [
          "休闲零食",
          "粮油速食",
          "中外名酒",
          "地方农货",
          "滋补养生",
          "饼干糕点",
          "饮品冲饮",
          "坚果蜜饯",
          "营养保健",
          "茶叶",
        ],
        [
          "厨房烹饪",
          "纸品湿巾",
          "日用百货",
          "个人护理",
          "节庆礼品",
          "图书乐器",
          "畜牧农资",
          "水杯餐具",
          "家庭清洁",
          "宠物用品",
        ],
        ["水果及制品", "柑桔橙柚", "热带水果", "瓜果桃梨枣", "蔬菜及制品"],
        [
          "美容美体仪",
          "男士护理",
          "水乳面霜",
          "护肤套装",
          "香水香氛",
          "口红唇釉",
          "身体洗护",
          "美甲美睫",
          "面膜",
          "美容工具",
        ],
        [
          "女包",
          "春上新",
          "男鞋",
          "运动鞋",
          "帆布鞋",
          "女鞋",
          "皮鞋",
          "钱包",
          "功能箱包",
        ],
        [
          "女士内衣",
          "春上新",
          "女士内裤",
          "袜子",
          "丝袜",
          "男士内裤",
          "基础打底衫",
          "围巾披肩",
          "帽子",
          "手套袖套",
        ],
        [
          "家庭用药",
          "诊察检测",
          "防疫专区",
          "三高心脑",
          "中药材",
          "避孕验孕",
          "康复辅助",
        ],
        [
          "自行车",
          "健身",
          "户外装备",
          "运动鞋",
          "运动服饰",
          "垂钓装备",
          "运动配件",
        ],
        [
          "上衣外套",
          "T恤",
          "春上新",
          "夹克",
          "裤装",
          "卫衣",
          "棉服羽绒",
          "冲锋衣",
          "衬衫",
        ],
        ["外套", "裙装", "套装", "上衣", "牛仔裤", "针织毛衣", "卫衣", "衬衫"],
        [
          "电视",
          "冰箱",
          "空调",
          "洗衣机",
          "中式厨电",
          "热水器",
          "厨房大电",
          "生活电器",
        ],
        ["腕表", "眼镜", "颈饰", "玉石翡翠", "耳饰", "手镯手链", "戒指"],
        [
          "四件套",
          "床单被罩",
          "被子被芯",
          "毛毯床垫",
          "枕芯枕套",
          "坐垫沙发垫",
          "地毯地垫",
          "蚊帐凉席",
          "毛巾浴巾",
        ],
        [
          "卧室家具",
          "桌椅板凳",
          "客厅家具",
          "餐厅家具",
          "架子柜子",
          "书房家具",
          "儿童家具",
        ],
        [
          "奶粉",
          "童装",
          "尿裤湿巾",
          "营养辅食",
          "童鞋",
          "孕妈专区",
          "儿童洗护",
        ],
      ],
      currentPage: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
    };
  },
  mounted() {
    this.getOptions1();
    this.getCompanyTechnology();
  },
  methods: {
    async getCompanyTechnology() {
      const data = {
        name: this.formData.name,
        broad: this.formData.broad,
        companyName: this.formData.companyName,
        type: this.formData.type,
        status: this.formData.status,
        page: this.currentPage.page,
        pageSize: this.currentPage.pageSize,
      };
      const res = await getProductList(data);
      if (res.status != 0) {
        this.$message.error(res.message);
        return;
      }
      this.tableData = res.data.data;
      this.currentPage.total = res.data.total;
    },
    approve(row) {
      console.log(row);
      this.$confirm("确定审批通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = {
            id: row.id,
            status: 2,
          };
          const res = await approveProduct(data);
          if (res.status != 0) {
            this.$message.error(res.message);
            return;
          }
          this.getCompanyTechnology();
          this.$message({
            type: "success",
            message: "已审批!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审批",
          });
        });
    },
    reApprove(row) {
      this.$confirm("确定审批未通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = {
            id: row.id,
            status: 3,
          };
          const res = await approveProduct(data);
          if (res.status != 0) {
            this.$message.error(res.message);
            return;
          }
          console.log(this.tableData);

          if (this.tableData.length == 1) {
            console.log(this.currentPage.page);

            this.currentPage.page = this.currentPage.page - 1;
          }
          this.getCompanyTechnology();
          this.$message({
            type: "success",
            message: "已审批!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审批",
          });
        });
    },
    deleteApp(row) {
      console.log(row);

      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = {
            id: row.id,
          };
          const res = await delCompanyTechnology(data);
          if (res.status != 0) {
            this.$message.error(res.message);
            return;
          }
          console.log(this.tableData);

          if (this.tableData.length == 1) {
            console.log(this.currentPage.page);

            this.currentPage.page = this.currentPage.page - 1;
          }
          setTimeout(() => {
            this.getCompanyTechnology();
          }, 500);
          // this.getCompanyTechnology()
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleChange(value) {
      console.log(value);
      console.log(this.formData);
      this.formData.broad = value[0];
      this.formData.type = value[1];
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage.pageSize = val;
      this.getCompanyTechnology();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage.page = val;
      this.getCompanyTechnology();
    },
    //商品类型字典
    getOptions1() {
      this.options1 = this.values.map((item) => {
        return {
          value: item,
          label: item,
          children: [],
        };
      });
      this.options1.forEach((item, index) => {
        item.children = this.values2[index].map((item2) => {
          return {
            value: item2,
            label: item2,
          };
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  padding: 20px;
  // height: 100vh;
  background: #f5f7fa;

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 20px;
  }
}
</style>
